<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/base.css" media="all">
		<link rel="stylesheet" href="${pageContext.request.contextPath }/css/detail.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.common.min.js"></script>
		<title>游客中心详情界面</title>
	</head>
	<body>
		<div class="my-container">
			<div class="my-header">
				<div class="my-header-back">
					<a href="javascript:;" id="my_back"><</a>
				</div>
				<div class="my-header-title">游客中心详情界面</div>
			</div>
			<div class="my-main">
				<table class="my-table" cellpadding="10" cellspacing="0" border="1">
					<tr><td>景点名称</td><td>景点买票人数</td><td>景点检票人数</td></tr>
					<tr><td>${result.parkFullName}</td><td>${result.sellNum}</td><td>${result.checkNum}</td></tr>
				</table>
			</div>
			<div class="my-tip">
				示意图如下：
			</div>
			<div class="my-charts" id="main">
			</div>
			<div class="my-tip" align="center"> 
				<a href="/add">增加发车</a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			document.getElementById("my_back").addEventListener("touchstart",function(){
				history.go(-1);
			})
			 // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('main'));
			var mydate=[];
			var t =${result.sellNum};
			var r =${result.checkNum};
			mydate.push(t);
			mydate.push(r);
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text:'人数关系图',
	                left: 10
	            },
	            tooltip: {},
	            legend: {
	                data:['人数']
	            },
	            grid: {
	                left: '5%',
	                right: '4%',
	                bottom: '3%',
	                containLabel: true
	            },
	            xAxis: {
	                data: ["买票人数","检票人数"]
	            },
	            yAxis: {
	            },
	            series: [{
	                name: '人数',
	                type: 'bar',
	                data: mydate
	            }]
	        };

	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
		}
	</script>
</html>
    